<template>
	<!--供应商报价单-->
	<view class="page-content" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<view class="page-top">
			<!-- 导航栏 agents导航栏标题 -->
			<nav-tab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab' fontS="36" afontS="36" fontW="600">
			</nav-tab>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper class="page-body" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(item,index) in objlist" :key="index">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation
					:scroll-into-view="toView">
					<template v-if="item && item.length > 0 ">
						<template v-if="currentTab === 0">
							<view class='body-box' v-if="item.length > 0" v-for="(ite,ind) in item" :key="ind">
								<view class="box-li" @click="todetail('pop',ite.id)"
									:style="{'border-bottom':pageType==='popcz'?'16rpx solid #f5f5f5':'1rpx solid #f5f5f5'}">
									<view class="box-li-l">
										<view class="name">{{ite.name}}
											<text class="tag"
												:style="{background:ite.status==='已上传'?'#198FFF':ite.status==='待补齐'?'#fff':ite.status==='未上传'?'#EEEEEE':'',color:ite.status==='已上传'?'#fff':ite.status==='待补齐'?'#FE5252':ite.status==='未上传'?'#999':'',border:ite.status==='已上传'?'1rpx solid #198FFF':ite.status==='待补齐'?'1rpx solid #FE5252':ite.status==='未上传'?'1rpx solid #eee':''}">{{ite.status}}</text>
										</view>
									</view>
									<view class="box-li-r icons icon-gengduo"></view>
								</view>
							</view>
						</template>
						<template v-if="currentTab === 1">
							<view class='body-box' v-if="item.length > 0" v-for="(ite,ind) in item" :key="ind">
								<view class="box-li" @click="todetail('prop',ite.id)"
									:style="{'border-bottom':pageType==='popcz'?'16rpx solid #f5f5f5':'1rpx solid #f5f5f5'}">
									<view class="box-li-l">
										<view class="name">{{ite.name}}
											<text class="tag"
												:style="{background:ite.status==='已上传'?'#198FFF':ite.status==='待补齐'?'#fff':ite.status==='未上传'?'#EEEEEE':'',color:ite.status==='已上传'?'#fff':ite.status==='待补齐'?'#FE5252':ite.status==='未上传'?'#999':'',border:ite.status==='已上传'?'1rpx solid #198FFF':ite.status==='待补齐'?'1rpx solid #FE5252':ite.status==='未上传'?'1rpx solid #eee':''}">{{ite.status}}</text>
										</view>
									</view>
									<view class="box-li-r icons icon-gengduo"></view>
								</view>
							</view>
						</template>
					</template>
					<!--无数据-->
					<empty v-else no-full type="noData"></empty>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const util = require('../../common/util2.js');
	import refresh from '@/components/w-refresh/refresh.vue';
	import navTab from '@/components/w-navTab/navTab.vue';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getPopPriceInfos,
		getPopPrices,
		getPropPrices,
		getPropPriceInfos,
		addPopPrices
		
	} from '@/common/api.js';
	export default {
		components: {
			refresh,
			navTab
		},
		data() {
			return {
				currentPage: 'index',
				toView: '', //回到顶部id
				tabTitle: ['POP', '道具'], //导航栏格式 --导航栏组件
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1], //第几个swiper的第几页
				objlist: [[],[]], //数据格式

				pageType: '', //页面类型 popcz-POP材质
				tipType: 0, // 1-编辑 2-新增 3-删除
				inputVal: '',
				params1: {
					company_id: '',
					page:1,
					limit:15
				},
				params2: {
					company_id: '',
					page:1,
					limit:15
				}
			};
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onLoad(option) {
			console.log(222, option)
			if (option.pageType) {
				this.pageType = option.pageType
			}
			this.params1.company_id = this.companyInfo.id;
			this.params2.company_id = this.companyInfo.id;
		},
		onNavigationBarButtonTap(e) {
			console.log(23, e)
			if (e.index == 0) {
				let type = 'd';
				uni.navigateTo({
					url: `/pages/contact/editTeams?type=${type}`
				})
			}
		},
		onShow() {
			this.getdata();
		},
		methods: {
			resdata(){
				this.getdata();
			},
			getdata(){
				if(this.currentTab === 0){
					getPopPrices(this.params1).then(res =>{
						if(res.code === 2000){
							this.objlist[this.currentTab] = res.data.data
							this.$forceUpdate() //二维数组，开启强制渲染
						}
					})
				}else if(this.currentTab === 1){
					getPropPrices(this.params2).then(res =>{
						if(res.code === 2000){
							this.objlist[this.currentTab] = res.data.data
							this.$forceUpdate() //二维数组，开启强制渲染
						}
					})
				}
			},
			todetail(type, id) {
				uni.navigateTo({
					url: `/pages/user/quotationDetail?pageType=${type}&id=${id}`
				})
			},
			toTop() {
				this.toView = ''
				setTimeout(() => {
					this.toView = 'top' + this.currentTab
				}, 10)
			},
			changeTab(index) {
				this.currentTab = index;
			},
			// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
			isRequest() {
				return new Promise((resolve, reject) => {
					this.pages[this.currentTab]++
					if(this.currentTab === 0){
						this.params1.page ++
					}else if(this.currentTab === 1){
						this.params2.page ++
					}
					var _self = this
					setTimeout(() => {
						uni.hideLoading()
						/* uni.showToast({
							icon: 'none',
							title: `请求第${_self.currentTab + 1 }个导航栏的第${_self.pages[_self.currentTab]}页数据成功`
						}) */
						let newData = [];
						if(this.currentTab === 0){
							getPopPrices(this.params1).then(res =>{
								if(res.code === 2000){
									newData = res.data.data;
									resolve(newData)
								}
							})
						}else if(this.currentTab === 1){
							getPropPrices(this.params2).then(res =>{
								if(res.code === 2000){
									newData = res.data.data;
									resolve(newData)
								}
							})
						}
					}, 200)
				})
			},
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
				if(this.currentTab === 0 && this.params1.page === 1){
					this.getdata();
				}else if(this.currentTab === 1 && this.params2.page === 1){
					this.getdata();
				}
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {
				console.log(`加载${this.currentTab}`) //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.isRequest().then((res) => {
					let tempList = this.objlist
					tempList[this.currentTab] = tempList[this.currentTab].concat(res)
					this.objlist = tempList
					this.$forceUpdate() //二维数组，开启强制渲染
				})
			}, 300),
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			isRefresh() {
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					this.$refs.refresh.endAfter() //刷新结束调用
				}, 1000)
			}
		}
	};
</script>

<style lang="scss">
	.page-content {
		width: 100vw;
		height: 100%;
		font-size: 28upx;
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;

		.page-body {
			height: calc(100% - 90rpx);
		}

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color-grey;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 2;
			border-bottom: 1rpx solid #F2F4F5;
		}
	}

	.content {
		width: 100%;
	}

	.body-box {

		.box-li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.box-li-r {
				display: flex;
				align-items: center;
				color: $font-color-9;
			}

			.box-li-l {
				display: flex;

				.name {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 400;
					color: $uni-text-color;

					.tag {
						margin-left: 20rpx;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 10rpx;
						font-size: 20rpx;
						border-radius: 4rpx;
					}
				}
			}
		}
	}

	.noCard {
		width: 90%;
		height: 200upx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10upx;
	}
</style>
tyle>
